<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>

        body {
            margin: 0;
            padding: 0;
        }

        li {
            width: 12%;
            text-align: center;
        }

        a:hover {
            color: red;
        }



        i:hover {
            color: red;
            margin: 5px 0 0 0;
        }
        body{
            background-color: #f5f6f7
        }
    </style>
</head>
<body>
<ul class="layui-nav ">
    <li class="layui-nav-item" style="width: 10%">
        <a href=""><i style="font-size: 30px">Haoke</i></a>
    </li>
    <li class="layui-nav-item">
        <a href="">博客</a>
    </li>
    <li class="layui-nav-item" style="">
        <a href="">下载</a>
    </li>
    <li class="layui-nav-item" style="width: 40%">
        <a href="">
            <input type="text" name="title" required lay-verify="required" placeholder="请输入搜索内容" autocomplete="off"
                   class="layui-input" style="width: 87%;float: left">
            <button class="layui-btn" style="float: right">搜索</button>
        </a>
    </li>
    <li class="layui-nav-item">
        <a href="">上传</a>
    </li>
    <li class="layui-nav-item">
        <a href="">登录/注册</a>
    </li>
</ul>
<div style="margin: 1% 18% 0 18%">
    <div style="width: 8.5%;float:left;background-color: white">

        <div style=" height:35px;text-align: center" th:each="type:${type}">
            <a style="line-height: 35px;" target="ifd" th:href="@{/iframeType.html(tName=${type.tName})}">[[${type.tName}]]</a>
            <br/><br/>
        </div>


    </div>

    <div style="width: 1%;float: left">&nbsp;</div>
    <div style="width: 64%;float: left">
        <div style="height: 280px;background-color: #B5FFF8">
            <div class="layui-carousel" id="test1">
                <div carousel-item>
                    <div><img src="img/yinghua.jpg" style="width: 100%;height: auto"></div>
                    <div><img src="img/fengjing.jpg" style="width: auto;height: auto"></div>
                </div>
            </div>
        </div>
        <div style="background-color: #f5f6f7">&nbsp;</div>
        <div style="width: 100%";>
            <iframe  name="ifd" src="/iframeType.html"
                    onload="this.height=ifd.document.body.scrollHeight"
                    width="100%"  scrolling="no"
                    frameborder="0"
                    style="float: left;border: none">

            </iframe>
        </div>
    </div>
    <div style="width: 1%;float: left">&nbsp;</div>
    <div style="width: 25.5%;float: right">
        <div style="height: 350px;background-color: #01AAED">111</div>
        <div style="height: 5%;background-color: #f5f6f7">&nbsp;</div>
                <div style="background-color: white"  th:each="u:${Userfs}">
                    <div style="width: 50px;overflow: hidden;height: 50px;border-radius: 30px;margin: 5px 0 0 0; background-color: black;float: left">
                        <img src="img/moren.png" style="width:100%;height:100%;border-radius:50%;display:flex;"></div>
                    <div style="width: 10px;float:left;">&nbsp;</div>
                    <div style="height: 60px;width:100px;float: left">
                        <div style="float: left;height: 40px;width: 100px;line-height: 50px;font-size: 15px;font-weight: bold"><a href="">[[${u.uNickname}]]</a></div>
                        <div style="height: 20px;font-size:10px;width:100px;line-height: 20px">文章数：99</div>
                    </div>
                    <div style="float: right;height: 60px;width: 60px;line-height: 70px;font-size: 15px">
                        <span>粉丝数[[${u.fans}]]</span>
                    </div>
                    <hr style="margin: 10px 0 0 0">
                </div>


    </div>
</div>

<script src="layui/layui.js"></script>
<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
</script>
</body>
</html>